<template>
    <el-card class="card">
        <template #header>
            <div class="card-header">
                <span style="font-weight: 700;font-size: 22px">方案设计器</span>
            </div>
        </template>
        <div class="content" ref="content">
            <Tmplib v-show="leftType === 'tmp'" @setType="setType" @resetHtml="resetHtml" />
            <Subsection v-show="leftType === 'subsection'" @setType="setType" @setEditor="setEditor" ref="subsectionRef"/>
            <div class="editorContent">
                <el-card class="card">
                    <template #header>
                        <div class="card-header">
                            <div class="nav">
                                <div class="title save">
                                    <div class="pointer" @click="saveDraft">
                                        <img width="12px" height="14px" alt="" src="">
                                        <span>保存草稿</span>
                                    </div>
                                </div>
                                <div>
                                    <el-button type="text" icon="DeleteFilled" @click="resetHtml('')">清空</el-button>
                                    <el-button type="text" icon="View" @click="toPreview">预览</el-button>
                                    <el-button type="text" icon="Promotion" @click="createScheme(createSchemeRef)">生成方案</el-button>
                                </div>
                            </div>
                        </div>
                    </template>
                    <Editor ref='editor' class="editor"/>
                </el-card>
            </div>
        </div>
        <Preview ref="previewRef" :html="html" />
        <CreateScheme ref="createSchemeRef" :html="html" :id="id" />
    </el-card>
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue';
import Editor from './components/editor.vue';
import Tmplib from './components/tmplib.vue';
import Subsection from './components/subsection.vue';
import Preview from '@/components/preview/index.vue';
import CreateScheme from './components/createScheme.vue';
import {useRoute} from 'vue-router';
import {documentGet} from './api/req.js'

const editor = ref()
const content = ref(null)
const height = ref('100%')
const leftType = ref('tmp')
const subsectionItem = ref({})
const route = useRoute()
const id = ref('')

onMounted(() => {
})

onActivated(() => {
    if (!route.query.id) {
        resetData()
    } else if (id.value !== route.query.id) {
        id.value = route.query.id
        getDetail()
    }
})

const resetData = () => {
    leftType.value = 'tmp'
    id.value = ''
    resetHtml()
    createSchemeRef.value.setForm({
        name: '',
        // createdUser: '',
        businessName: '',
        version: ''
    })
}

const getDetail = async () => {
    if (!id.value) return
    try {
        let res = await documentGet({
            id: id.value
        })
        if (res.code === 0) {
            resetHtml(res.data.doc)
            createSchemeRef.value.setForm(res.data)
        }
    } catch (error) {
        console.log(error)
    }
}
const subsectionRef = ref(null)
const setType = (type, item) => {
    leftType.value = type;
    if (item) {
        subsectionRef.value.generateTOC(item)
    }
}

const setEditor = (result) => {
    editor.value.setHtml(result);
}

const resetHtml = (val) => {
    editor.value.resetHtml && editor.value.resetHtml(val);

}
const html = ref('');
const previewRef = ref(null);
const toPreview = () => {
    html.value = editor.value.valueHtml;
    previewRef.value.showdialog();
}
const createSchemeRef = ref(null)
const createScheme = (createSchemeRef) => {
    html.value = editor.value.valueHtml;
    createSchemeRef.showdialog()
}

const saveDraft = () => {
  sessionStorage.setItem('draft', editor.value.valueHtml)
}
defineOptions({
    name: 'generation'
})
</script>

<style lang="scss" scoped>
.card {
    display: flex;
    flex-direction: column;
    ::v-deep .el-card__header {
        padding: 10px;
    }
    & > ::v-deep .el-card__body {
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px 0 0 0;
    }
    .content {
        display: flex;
        height: 100%;
        .editorContent {
            min-width: 200px;
            flex: 1;
            display: flex;
            flex-direction: column;
            .editor {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .card {
                height: 100%;
            }
        }
        .nav {
            line-height: 32px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
            .save {
                img {
                    vertical-align: text-top;
                }
                span {
                    font-size: 14px;
                    margin-left: 3px;
                }
            }
        }
    }
    .pointer {
        cursor: pointer;
    }
}
</style>